<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<div id="head" style="height: 55px; background:#374077;line-height: 55px;color:white; text-indent: 20px; " >
    明日头条后台管理系统
</div>
<div id="all"  data-options="fit:true" class="easyui-layout" >
    <!--<div data-options="region:'north',title:'明日头条'" style="font-size: 15px;height: 55px;line-height: 25px;margin-right: 25px">-->
        <!---->
    <!--</div>-->

    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:180px;">
        <div id="aa" data-options="fit:true" class="easyui-accordion" style="width:300px;height:200px;">
            <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                <p>Accordion is a part of easyui framework for jQuery.
                    It lets you define your accordion component on web page more easily.</p>
            </div>
            <div title="管理操作" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-man" ><a style="display: block;width: 60px; height: 20px; text-decoration: none;color:black ;"  href="javascript:void(0)"  iconCls="icon-man" data-link="user.html" iframe="1">用户管理</a></li>
                    <li iconCls="icon-large-clipart" ><a style="display: block;width: 60px; height: 20px; text-decoration: none;color:black; "  href="javascript:void(0)" iconCls="icon-large-clipart" data-link="kinds.html" iframe="1">分类管理</a></li>
                    <li iconCls="icon-large-smartart" ><a style="display: block;width: 60px; height: 20px; text-decoration: none;color:black; "  href="javascript:void(0)" iconCls="icon-large-smartart" data-link="news.html" iframe="1">新闻管理</a></li>

                </ul>
            </div>
            <div title="Title3">
                content3
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#39508a;">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="首页" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript">
    //iframe有0和1两种模式
	$(function(){
		$('.wu-side-tree a').bind("click",function(){
			var title = $(this).text();
			var url = $(this).attr('data-link');
			var iconCls = $(this).attr('iconCls');
//			var iconCls="icon-ok";
			var iframe = $(this).attr('iframe')==1?true:false;
			addTab(title,url,iconCls,iframe);
		});
	})
	function addTab(title, href, iconCls, iframe){
		var tabPanel = $('#wu-tabs');
		if(!tabPanel.tabs('exists',title)){
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
			if(iframe){
				tabPanel.tabs('add',{
					title:title,
					content:content,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
			else{
				tabPanel.tabs('add',{
					title:title,
					href:href,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}
		}
		else
		{
			tabPanel.tabs('select',title);
		}
	}
</script>